export default {
  computed: {
    options() {
      return this.params["__options__"];
    },
    config() {
      return this.params["__config__"];
    },
    vModel: {
      get() {
        return this.params["__vModel__"];
      },
      set(val) {
        this.params["__vModel__"] = val;
      },
    },
    slot() {
      return this.params["__slot__"];
    },
    field() {
      return this.params["__field__"];
    },
    componentName() {
      return this.params["__componentName__"];
    },
    echartsOptions() {
      return this.params["__echartsOptions__"];
    },
    commonOptions: {
      get() {
        return this.params["__commonOptions__"];
      },
      set(val) {
        this.params["__commonOptions__"] = val;
      },
    },
  },
  methods: {
    copy(params) {
      this.$emit("copy", params);
    },
    remove(params) {
      this.$emit("remove", params);
    },
    changeComponent(params) {
      this.$emit("changeComponent", params);
    },
    getFreeStyle(options, type) {
      const {
        width,
        height,
        left,
        top,
        inset,
        xShadow,
        yShadow,
        fShadow,
        cShadow,
        rotate,
        scaleX,
        scaleY,
      } = options;
      const filterArr = [
        "width",
        "height",
        "left",
        "top",
        "style",
        "styleText",
        "id",
      ];
      const numberValueArr = [
        "borderWidth",
        "borderTopLeftRadius",
        "borderTopRightRadius",
        "borderBottomLeftRadius",
        "borderBottomRightRadius",
      ];
      const stringValueArr = ["borderStyle", "borderColor", "backgroundColor"];
      let style = {};
      Object.entries(options).map((item) => {
        if (!filterArr.includes(item[0])) {
          // number转字符串rem单位
          if (numberValueArr.includes(item[0])) {
            style[item[0]] = item[1] + "rem";
          } else if (stringValueArr.includes(item[0])) {
            style[item[0]] = item[1];
          }
        } else {
          style[item[0]] = item[1];
        }
      });
      const obj = {
        boxShadow: `${xShadow}rem ${yShadow}rem ${fShadow}rem ${cShadow} ${inset ? "inset" : ""
          }`,
        transform: `rotate(${rotate}deg) ${scaleX ? "scaleX(-1)" : ""} ${scaleY ? "scaleY(-1)" : ""
          }`,
      };
      style = { ...style, ...obj };
      // style.styleText.replace(/(\s+)|[{,}]/ig, '')
      if (type === "preview") {
        return {
          ...style,
          // width: labelWidth ? width - labelWidth + "rem" : width + "rem",
          width,
          height,
          left,
          top,
          position: "absolute",
          zIndex: this.params["z-index"],
        };
      } else {
        return style;
        // return {

        //   // width: labelWidth ? width - labelWidth + "rem" : width + "rem",
        //   // height: this.params["__isForm__"] ? "" : height + "rem",
        // };
      }
    },
  },
};
